import React, { Component } from 'react';
import styles from './index.less';
// import '../components/BigScreen.js';
import Border from '@/components/border/index.jsx';
import AirConditions from '@/components/airConditions/index.jsx';
import Lighting from '@/components/lighting/index.jsx';
import Notices from '@/components/notices/index.jsx';
import PowerRate from '@/components/powerRate/index.jsx';
import Environment from '@/components/environment/index.jsx';
import PowerCompared from '@/components/powerCompared/index.jsx';
import CarbonInfo from '@/components/carbonInfo/index.jsx';
import Time from '@/components/common/Time/index.jsx';
import Floor from '@/components/floor/index.jsx';
import BuildPower from '@/components/buildPower/index.jsx';
import Score from '@/components/score/index.jsx';
import '../assets/swiper.min.js';
import '../assets/swiper.min.css';
import {
  getAirConditions,
  getLightings,
  getNotices,
  getPowerRate,
  getPowerCompared,
  getWeather,
  getCarbonInfo,
  getEnvironment,
  getBuildingsPower,
  getShowConfigs,
  getElectricMonitors,
  getStationGrade,
} from '@/services/index';
import W from '@/assets/W.svg';

const project_id = '5cda58bb86f16412d565a0d4';
export default class IndexPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      airCondition: [],
      lightCode: [],
      noticesData: [],
      weather: {},
      carbonInfo: {},
      powerRate: {}, //今日用电情况
      environment: {}, //楼宇环境
      buildingsPower: [], //每层用电
      first: false,
      second: false,
      electricMonitors: [], //漏电e
      score: {}, //电房评分
      powerCompare: [], //用电量区
      isBack: false,
    };
  }
  componentDidMount() {
    this.getShowConfigsData();
    this.getNoticesData();
    this.getAirConditionsData();
    this.getLightingsData();
    this.getWeatherData();
    this.getCarbonInfoData();
    this.getPowerRateData();
    this.getEnvironmentData();
    this.getElectricMonitorsData();
    this.getBuildingsPowerData();
    this.getStationGradeData();
    this.getPowerComparedData();
    this.getFull();

    setInterval(() => {
      this.getShowConfigsData();
      this.getNoticesData();
      this.getAirConditionsData();
      this.getLightingsData();
      this.getWeatherData();
      this.getCarbonInfoData();
      this.getPowerRateData();
      this.getEnvironmentData();
      this.getElectricMonitorsData();
      this.getBuildingsPowerData();
      this.getStationGradeData();
      this.getPowerComparedData();
    }, 3600000);
  }
  //全屏
  getFull() {
    document
      .getElementById('header')
      .addEventListener('mousedown', function () {
        if (screenfull.isEnabled) {
          screenfull.toggle();
        }
      });
    document
      .getElementById('header1')
      .addEventListener('mousedown', function () {
        if (screenfull.isEnabled) {
          screenfull.toggle();
        }
      });
    document
      .getElementById('header2')
      .addEventListener('mousedown', function () {
        if (screenfull.isEnabled) {
          screenfull.toggle();
        }
      });
    document
      .getElementById('header3')
      .addEventListener('mousedown', function () {
        if (screenfull.isEnabled) {
          screenfull.toggle();
        }
      });
    document
      .getElementById('header4')
      .addEventListener('mousedown', function () {
        if (screenfull.isEnabled) {
          screenfull.toggle();
        }
      });
    document
      .getElementById('header5')
      .addEventListener('mousedown', function () {
        if (screenfull.isEnabled) {
          screenfull.toggle();
        }
      });

    function autoScreenFull() {
      console.log('autoScreenFull...');
      try {
        screenfull.toggle();
        window.removeEventListener('mousemove', autoScreenFull);
      } catch (e) {
        console.log('e...', e);
      }
    }
    window.addEventListener('mousemove', autoScreenFull);
  }
  // 电房评分区
  getStationGradeData() {
    getStationGrade(project_id).then((res) => {
      if (res.data.code == 0) {
        this.setState({
          score: res.data.data,
        });
      }
    });
  }
  //显示配置
  getShowConfigsData() {
    getShowConfigs(project_id).then((res) => {
      if (res.data.code == 0) {
        this.setState({
          // first: res.data.data.station_grade_show,  //true显示电房评分区块 false显示空调列表区块（已弃用）
          // second: res.data.data.electric_monitors_show, // true显示漏电监测列表区块 false显示照明列表列表区块(已弃用)
          first: res.data.data.block_0, // 2:电房评分区 4:空调列表区 8:漏电监测线路区 16:照明列表区
          second: res.data.data.block_1, //block_0:左上角区 block_1:左下角区
        });
      }
    });
  }
  //漏电显示区
  getElectricMonitorsData() {
    getElectricMonitors(project_id).then((res) => {
      if (res.data.code == 0) {
        this.setState({
          electricMonitors: res.data.data,
        });
      }
    });
  }
  //每层用电
  getBuildingsPowerData() {
    getBuildingsPower(project_id).then((res) => {
      if (res.data.code == 0) {
        this.setState({
          buildingsPower: res.data.data,
        });
      }
    });
  }
  //楼宇环境
  getEnvironmentData() {
    getEnvironment(project_id).then((res) => {
      if (res.data.code == 0) {
        this.setState({
          environment: res.data.data,
        });
      }
    });
  }
  //碳排放
  getCarbonInfoData() {
    getCarbonInfo(project_id).then((res) => {
      if (res.data.code == 0) {
        this.setState({
          carbonInfo: res.data.data,
        });
      }
    });
  }
  //今日用电情况
  getPowerRateData() {
    getPowerRate(project_id).then((res) => {
      if (res.data.code == 0) {
        this.setState({
          powerRate: res.data.data,
        });
      }
    });
  }
  //天气
  getWeatherData() {
    getWeather(project_id).then((res) => {
      if (res.data.code == 0) {
        this.setState({
          weather: res.data.data,
        });
      }
    });
  }
  // 空调
  getAirConditionsData() {
    getAirConditions(project_id).then((res) => {
      if (res.data.code == 0) {
        this.setState({
          airCondition: res.data.data,
        });
      }
    });
  }
  //照明
  getLightingsData() {
    getLightings(project_id).then((res) => {
      if (res.data.code == 0) {
        this.setState({
          lightCode: res.data.data,
        });
      }
    });
  }
  // 通知
  getNoticesData() {
    getNotices(project_id).then((res) => {
      if (res.data.code == 0) {
        this.setState({
          noticesData: res.data.data,
          isBack: true,
        });
      }
    });
  }

  // 用电量区
  getPowerComparedData() {
    getPowerCompared(project_id).then((res) => {
      if (res.data.code == 0) {
        this.setState({
          powerCompare: res.data.data,
        });
      }
    });
  }
  // 根据数字显示组件
  getComponent(number, score, airCondition, lightCode, electricMonitors) {
    switch (number) {
      case 2:
        return <Score data={score || {}} />;
      case 4:
        return <AirConditions data={airCondition || []} />;
      case 8:
        return (
          <Lighting
            data={lightCode || []}
            sign={true}
            electricMonitors={electricMonitors || []}
          />
        );
      case 16:
        return (
          <Lighting
            data={lightCode || []}
            sign={false}
            electricMonitors={electricMonitors || []}
          />
        );
    }
  }

  render() {
    const {
      airCondition,
      lightCode,
      noticesData,
      weather,
      carbonInfo,
      powerRate,
      environment,
      buildingsPower,
      second,
      electricMonitors,
      first,
      score,
      powerCompare,
      isBack,
    } = this.state;
    return (
      <div className={styles.whole}>
        <header id="header">
          <img src={W} />
          <div className={styles.zhu}></div>
          <span className={styles.time}>
            <Time />
          </span>
          <span className={styles.exit}>退出</span>
        </header>
        <div className={styles.container}>
          <div className={styles.left} id="header1">
            {/* {first == true ? (
              <Score data={score || {}} />
            ) : (
              <AirConditions data={airCondition || []} />
            )}
            <Lighting
              data={lightCode || []}
              sign={second && second}
              electricMonitors={electricMonitors || []}
            /> */}
            {this.getComponent(
              first,
              score,
              airCondition,
              second,
              lightCode,
              electricMonitors,
            )}
            {this.getComponent(
              second,
              score,
              airCondition,
              second,
              lightCode,
              electricMonitors,
            )}
          </div>
          <div className={styles.center}>
            <div className={styles.top} id="header2">
              <div className={styles.evior}>
                <Environment data={weather || {}} />
              </div>
              <div className={styles.info}>
                <CarbonInfo data={carbonInfo || {}} />
              </div>
            </div>
            <div className={styles.floor} id="header3">
              <Floor data={environment || {}} />
            </div>
            <div className={styles.footer}>
              <BuildPower data={buildingsPower || {}} />
            </div>
          </div>
          <div className={styles.right}>
            <div id="header4">
              <Notices data={noticesData || []} isBack={isBack} />
            </div>
            <PowerCompared data={powerCompare || []} />
            <div id="header5">
              <PowerRate data={powerRate || {}} />
            </div>
          </div>
        </div>
        <div></div>
      </div>
    );
  }
}
